<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>角色管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</head>
<body>

<%--搜索--%>
<form class="layui-form" action="" lay-filter="updateForm1">
    <div class="layui-input-inline">
        <label class="layui-form-label">角色ID:</label>
        <div class="layui-input-inline">
            <input type="text" name="id" required autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-input-inline">
        <label class="layui-form-label">角色名:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <button class="layui-btn layui-btn-warm" lay-submit lay-filter="formDemo1">搜索</button>
    <button type="reset" class="layui-btn layui-btn-primary" id="re">重置</button>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>

<%--表头--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe608;</i>添加角色</button>
    </div>
</script>

<%--操作按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <%--    模板引擎--%>
    <%--    如果 人数==0 可以删除 d代表当前一行的数据--%>
    {{#  if(d.a>0 || d.id==1 ){ }}
    <button  class="layui-btn layui-btn-disabled layui-btn-xs">操作</button>
    {{# } else{  }}
    <button lay-event="caozuo" class="layui-btn layui-btn-warm layui-btn-xs">操作</button>
    {{#} }}

    {{#  if(d.a>0 && d.id!=1 ){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="qxfp">权限分配</a>
    {{# } else{  }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled">权限分配</a>
    {{#} }}
</script>

<%--添加修改弹出层--%>
<div id="addOrUpdate">
    <form class="layui-form" action="" lay-filter="updateForm" id="addForm">
        <div hidden="true"><input type="text" name="id"></div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<%--权限分配弹出层--%>
<div id="treemenu">
    <input type="hidden" id="rid">
    <div id="test12" class="demo-tree-more"></div>
    <button class="layui-btn" onclick="fenpeiquanxian();">分配权限</button>
</div>

<div id="caozuo" style="display: none">
    <input type="hidden" id="hid">
    <button id="one" class="layui-btn layui-btn-warm layui-btn-radius">停用</button>
    <button id="two" class="layui-btn layui-btn-danger layui-btn-radius" >恢复</button>
</div>

<script>
    var tree = "";
    var $ = "";
    var layer = "";
    layui.use(['table', 'jquery', 'layer', 'form', 'tree', 'util'], function () {
        var table = layui.table;
        $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
        tree = layui.tree;
        var util = layui.util;
        $('#treemenu').hide();//隐藏

        //菜单所需要的数据
        var data = [{
            id: 32,
            title: '盘点管理',
            spread: true,
            children: [{
                id: 33,
                title: '盘点信息'
            }]
        },{
            id: 30,
            title: '统计管理',
            spread: true,
            children: [{
                id: 31,
                title: '营业额统计'
            },{
                id: 35,
                title: '入库额统计'
            }]
        },{
            id: 1,
            title: '权限管理',
            spread: true,
            children: [{
                id: 11,
                title: '角色信息'
            }]
        }, {
            id: 2,
            title: '员工管理',
            spread: true,
            children: [{
                id: 12,
                title: '员工信息'
            }]
        }, {
            id: 3,
            title: '入库管理',
            spread: true,
            children: [{
                id: 14,
                title: '入库信息'
            }, {
                id: 13,
                title: '添加入库'
            }]
        }, {
            id: 4,
            title: '出库管理',
            spread: true,
            children: [{
                id: 28,
                title: '出库信息'
            }, {
                id: 29,
                title: '添加出库'
            }]
        }, {
            id: 5,
            title: '部门管理',
            spread: true,
            children: [{
                id: 27,
                title: '部门信息'
            }]
        }, {
            id: 6,
            title: '订单管理',
            spread: true,
            children: [{
                id: 23,
                title: '预定客房'
            }, {
                id: 24,
                title: '修改订单'
            },  {
                id: 26,
                title: '退换客房'
            }, {
                id: 34,
                title: '入住信息'
            }]
        }, {
            id: 7,
            title: '设施管理',
            spread: true,
            children: [{
                id: 21,
                title: '设施类型'
            }, {
                id: 22,
                title: '设施管理'
            }]
        }, {
            id: 8,
            title: '客房管理',
            spread: true,
            children: [{
                id: 17,
                title: '房间类型'
            }, {
                id: 19,
                title: '房间设施'
            }, {
                id: 20,
                title: '房间'
            }]
        }, {
            id: 9,
            title: '前台管理',
            spread: true,
            children: [{
                id: 16,
                title: '前台信息'
            }]
        }, {
            id: 10,
            title: '客户管理',
            spread: true,
            children: [{
                id: 15,
                title: '客户信息'
            }]
        }];

        //基本演示
        tree.render({
            elem: '#test12'
            , data: data
            , showCheckbox: true  //是否显示复选框
            , id: 'demoId1'
            // ,isJump: true //是否允许点击节点时弹出新窗口跳转
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        $("#addOrUpdate").hide();//隐藏弹出层

        //表格选染
        table.render({
            elem: '#test'
            , url: '${pageContext.request.contextPath}/role1/getAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}
                , {field: 'name', title: '角色名'}
                , {field: 'a', title: '人数'}
                , {field: 'status', title: '状态',templet:function (data){
                    if (data.status==0){
                        return "正常";
                    }else {
                        return "已停用";
                    }
                    }}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
            , limit: 6
            , limits: [2, 4, 6, 8]
            , done: function (res, curr, count) {
                var that = this.elem.next();
                res.data.forEach(function (item, index) {
                    if (item.status === 1) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                        tr.css("background-color", "gray");//目标单元格颜色
                        tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
                    }
                });
            }, parseData: function (res) {
                if (res.code == -1) {
                    layuiHelp.AlertMsg(res.msg, res.icon);
                }
            }

        });
        $("#re").click(function (){
            location=location

        });

        //搜索框事件
        form.on('submit(formDemo1)', function (data) {
            console.log(data)
            table.reload("test", {
                page: {
                    //从第一页开始加载
                    curr: 1
                }, where: data.field
            })
            return false;
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var data = obj.data;//一行数据
            //添加
            if (obj.event === 'add') {

                $("#addForm")[0].reset()
                layer.open({
                    type: 1,//页面层
                    title: "添加角色",
                    content: $("#addOrUpdate"), //这里content是一个普通的String
                    area: ['500px', '300px'],
                    offset: '100px'
                });

                //给form赋值
                form.val("updateForm", data);
            }

            //监听提交
            form.on('submit(formDemo)', function (data) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/role1/updRole"
                        , data: data.field
                        , success: function (d) {
                            if (d > 0) {
                                layer.msg("添加成功！");
                            } else {
                                layer.msg("添加失败！");
                            }
                        }
                    })
                layer.closeAll();
                //表格数据重载
                table.reload("test", {
                    page: {
                        //从第一页加载
                        curr: 1
                    }
                });
                return false;
            });
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;//一行数据
            // alert(JSON.stringify(data));弹出数据
            //console.log(obj)
            //删除
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/role1/delRole"
                        , data: data
                        , success: function (r) {
                            if (r > 0) {
                                //表格数据重载
                                table.reload("test", {
                                    page: {
                                        //从第一页加载
                                        curr: 1
                                    }
                                });
                            }
                        }
                    })
                    // obj.del();视觉删除
                    layer.msg("删除成功！");
                    layer.close(index);
                });
            }
            //编辑修改
            else if (obj.event === 'edit') {
                layer.open({
                    type: 1,//页面层
                    title: "修改角色",
                    content: $("#addOrUpdate"), //这里content是一个普通的String
                    area: ['500px', '300px'],
                    offset: '100px'
                });
                //给form赋值
                form.val("updateForm", data);
                //监听提交
                form.on('submit(formDemo)', function (data) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/role1/updRole"
                        , data: data.field
                        , success: function (d) {
                            if (d > 0) {
                                layer.msg("修改成功！");
                            } else {
                                layer.msg("修改失败！");

                            }
                        }
                    })
                    layer.closeAll();
                    //表格数据重载
                    table.reload("test", {
                        page: {
                            //从第一页加载
                            curr: 1
                        }
                    });
                    return false;
                });
            }
            //权限分配
            else if (obj.event === 'qxfp') {
                $("#rid").val(data.id);//角色赋值
                //打开一个弹出层
                layer.open({
                    type: 1,
                    content: $("#treemenu"),
                    area: ['400px', '300px'],
                    offset: '100px',
                });
                tree.reload('demoId1', {});
                //获取 这个角色所拥有的菜单
                var checkData = [];
                //重载实例
                $.ajax({
                    url: "${pageContext.request.contextPath}/role1/getMenuByRid",
                    data: {rid: data.id},
                    async: false,
                    success: function (d) {
                        for (var i = 0; i < d.length; i++) {
                            checkData.push(d[i].mid);
                        }
                        tree.setChecked('demoId1', checkData); //勾选指定节点
                    }
                });
            }//状态操作
            else if (obj.event === 'caozuo') {

                /*confirmTrans: function(){*/
                //配置一个透明的询问框
                layer.msg('',{
                    content: $("#caozuo"),
                    closeBtn: 1,
                    time: 10000,
                    cancel: function () {
                        location = location;
                    },
                    success: function () {
                        $("#hid").val(data.id)
                    }
                });
            }

        });
        $("#one").click(function (){
            var id=$("#hid").val();

            /* layer.closeAll();*/
            $.ajax({
                url:"${pageContext.request.contextPath}/role1/bad",
                data:{id:id},
                async:false,
                success:function (d){
                    if (d>0){
                        layer.msg("已停用")
                    }
                },error:function (){
                    alert(55)
                }
            })
            setTimeout(function() {
                window.location.reload();
            },400);
        })

        $("#two").click(function (){
            var id=$("#hid").val();
            /* layer.closeAll();*/
            $.ajax({
                url:"${pageContext.request.contextPath}/role1/good",
                data:{id:id},
                async:false,
                success:function (d){
                    if (d>0){
                        layer.msg("已恢复");
                    }
                },error:function (){
                    alert(66)
                }
            })
            setTimeout(function() {
                window.location.reload();
            },400);
        })
    });

    function fenpeiquanxian() {
        var rid = $("#rid").val();
        var arr = [];//装菜单id
        //获取 tree菜单选中的信息
        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
        //获取所有选中的id
        for (var i = 0; i < checkedData.length; i++) {
            var parentNode = checkedData[i];//一级菜单内容
            var id = parentNode.id;//父级菜单id
            arr.push(id);
            var childrenNode = parentNode.children;//子级菜单信息
            for (var j = 0; j < childrenNode.length; j++) {
                var cid = childrenNode[j].id;//子级菜单id
                arr.push(cid);
            }
        }
        var menuid = (arr.join(","));
        $.ajax({
            url: "${pageContext.request.contextPath}/role1/updQx",
            data: {rid: rid, mid: menuid},
            success: function (d) {
                if (d > 0) {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.open({
                            type:0,
                            offset:'100px',
                            content:"分配成功！"
                        })

                    });
                } else {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.open({
                            type:0,
                            offset:'100px',
                            content:"分配失败！"
                        })

                    });
                }
            }
        });
        layer.closeAll();
        // layer.alert(JSON.stringify(checkedData), {shade: 0});
    }
</script>
</body>
</html>